<template>
  <div class="bound">
    <!-- 手机绑定过程 -->
    <div :model="model" class="telbox">
      <cube-form-group class="telform">
        <div class="telinput">
          <input
            type="text"
            maxlength="11"
            onkeyup="value=value.replace(/[^\d\.]/g,'')"
            v-model="model.tel"
            @input="telblur"
            placeholder="请填写手机号"
          />
        </div>
        <div class="telinput">
          <input
            type="text"
            maxlength="4"
            onkeyup="value=value.replace(/^[0-9a-zA-Z]{11}$/g,'')"
            v-model="model.graph"
            placeholder="请填写图形验证码"
          />
          <img class="imgcode" :src="imgcode" @click="getCaptchImg" />
        </div>
        <div class="telinput">
          <input
            v-model="model.verifyNum"
            maxlength="6"
            onkeyup="value=value.replace(/[^\d\.]/g,'')"
            placeholder="请填写短信验证码"
          />
          <button
            :class="notecode"
            :disabled="disabled"
            @click="msgcode"
            v-show="isshow"
          >{{codetext}}</button>
        </div>
        <p class="prompt" v-if="statu">
          <img src="../assets/error.png" alt />
          <span>{{errorText}}</span>
        </p>
      </cube-form-group>
      <cube-form-group align="center" class="TelBtn">
        <button :disabled="isDisabled" :class="{BtnBound:true,visit:visits}" @click="btnsubmit">
          <!-- <span>确定</span> -->
          确定
        </button>
      </cube-form-group>
    </div>
  </div>
</template>

<script>
import { captcha, telverify, docbind } from "../api/captch";
export default {
  data() {
    return {
      model: {
        tel: "",
        graph: "",
        verifyNum: ""
      },
      imgcode: "",
      errorText: "",
      statu: false,
      notecode: { bluecode: true, gray: true },
      disabled: true,
      time: "",
      codetext: "获取验证码",
      Btnsure: { BtnBound: true, visit: false },
      isshow: true
    };
  },
  computed: {
    visits: function() {
      if (
        this.model.tel != "" &&
        this.model.graph.length == 4 &&
        this.model.verifyNum.length == 6
      ) {
        return true;
      } else {
        return false;
      }
    },
    isDisabled: {
      get: function() {
        if (
          this.model.tel != "" ||
          this.model.graph != "" ||
          this.model.verifyNum != ""
        ) {
          return false;
        } else {
          return true;
        }
      },
      set: function(newV) {
        console.log(newV);
      }
    }
  },
  watch: {
    "model.graph": function(newVal, oldVal) {
      if (newVal.length == 4) {
        this.disabled = false;
        this.notecode.gray = false;
      } else {
        this.disabled = true;
        this.notecode.gray = true;
      }
    }
  },
  created() {
    this.getCaptchImg();
  },
  methods: {
    statushow() {
      if (this.statu == true) {
        setTimeout(() => {
          this.statu = false;
        }, 5000);
      }
    },
    getCaptchImg() {
      captcha().then(res => {
        this.imgcode = res.data.img;
        this.imgkey = res.data.key;
      });
    },
    //手机号
    telblur() {
      console.log(111);
    },
    //发送短信验证码
    msgcode() {
      telverify({
        type: "cards",
        mobile: this.model.tel,
        code: this.model.graph,
        key: this.imgkey
      }).then(res => {
        if (res.code == 200) {
          this.notecode.gray = false;
          this.disabled = false;
          this.time = 60;
          this.timer();
        } else {
          this.errorText = res.message;
          this.statu = true;
          this.statushow();
        }
      });
    },
    // 短信发送时长60秒
    timer() {
      if (this.time > 0) {
        this.disabled = true;
        this.time--;
        this.codetext = this.time + "秒后可重新获取";
        this.notecode.gray = true;
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.disabled = false;
        this.codetext = "获取验证码";
        this.notecode.bluecode = true;
        this.notecode.gray = false;
      }
    },
    //提交
    btnsubmit() {
      if (this.model.tel == "" || this.model.tel == undefined) {
        this.errorText = "请输入手机号";
        this.statu = true;
        this.statushow();
        return true;
      } else if (!/^1[3456789]\d{9}$/.test(this.model.tel)) {
        this.errorText = "手机号格式错误";
        this.statu = true;
        this.statushow();
        return true;
      } else if (this.model.graph == "" || this.model.graph == undefined) {
        this.errorText = "请输入图形码";
        this.statu = true;
        this.statushow();
        this.notecode.gray = true;
        return true;
      } else if (this.model.graph.length < 4) {
        this.errorText = "验证码不符合规范";
        this.statu = true;
        this.statushow();
        this.notecode.gray = true;
        return true;
      } else if ( this.model.verifyNum == "" || this.model.verifyNum == undefined ) {
        this.errorText = "请输入验证码";
        this.statu = true;
        this.statushow();
        return true;
      } else if (this.model.verifyNum.length < 6) {
        this.errorText = "验证码不符合规范";
        this.statu = true;
        this.statushow();
        return true;
      } else {
        this.statu = false;
        this.disabled = false;
        // telverify({
        //   type: "cards",
        //   mobile: this.model.tel,
        //   code: this.model.graph,
        //   key: this.imgkey
        // }).then(res => {
        //   if (res.code == 200) {
        //     this.notecode.gray = false;
        //     this.disabled = false;
        //     docbind({
        //       code: this.model.verifyNum,
        //       wx_nickname: localStorage.nickname,
        //       openid: localStorage.openid,
        //       sex: localStorage.sex,
        //       mobile: this.model.tel
        //     }).then(res => {
        //       console.log(res.code);
        //       if (res.code == 200) {
        //         this.$router.push({
        //           path: "/boundS",
        //           query: {
        //             doctor_id: res.data.doctor_id
        //           }
        //         });
        //       } else if (res.code == 3136 || res.code == 3137) {
        //         this.$router.push({ name: "Docmate" });
        //       } else {
        //         this.$router.push({ name: "BoundF" });
        //       }
        //     });
        //   } else {
        //     this.errorText = res.message;
        //     this.statu = true;
        //     this.statushow();
        //   }
        // });
        docbind({
          code: this.model.verifyNum,
          wx_nickname: localStorage.nickname,
          openid: localStorage.openid,
          sex: localStorage.sex,
          mobile: this.model.tel
        }).then(res => {
          console.log(res.code);
          if (res.code == 200) {
            this.$router.push({
              path: "/boundS",
              query: {
                doctor_id: res.data.doctor_id
              }
            });
            localStorage.time = Date.now();
          } else if (res.code == 3136 || res.code == 3137) {
            this.$router.push({ name: "Docmate" });
          } else if (res.code == 3128){
            this.errorText = res.message;
            this.statu = true;
            this.statushow();
          } else {
            this.$router.push({ name: "BoundF" });
          }
        });
      }
      this.isDisabled = false;
    }
  }
};
</script>
<style scoped>
.telbox {
  background: transparent;
}
.telform {
  position: relative;
  padding-bottom: 40px;
}
.telinput {
  width: 550px;
  height: 80px;
  line-height: 80px;
  border: 2px solid #999999;
  border-radius: 8px;
  margin: 15px auto;
  text-align: left;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 36px;
  position: relative;
}
.telinput input {
  width: 250px;
  height: 100%;
  font-family: PingFangSC, PingFangSC-Regular;
  background: transparent;
}
.telinput:first-child input {
  width: 100%;
}
.bluecode {
  outline: none;
  border: none;
  padding: 0;
  line-height: 76px;
  box-sizing: border-box;
  float: right;
  color: #007cff;
  font-size: 30px;
  background-color: transparent;
  font-weight: 500;
}
.gray {
  outline: none;
  border: none;
  padding: 0;
  line-height: 76px;
  box-sizing: border-box;
  float: right;
  color: #999999;
  font-size: 30px;
  background-color: transparent;
  font-weight: 500;
}
.imgcode {
  float: right;
  width: 150px;
  height: 50px;
  margin-top: 15px;
}
.TelBtn.cube-form-group {
  overflow: visible;
}
.BtnBound {
  border: none;
  width: 550px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  display: block;
  margin: 10px auto;
  cursor: pointer;
  border-radius: 60px;
  font-size: 38px;
  font-weight: 500;
  color: #afb7c1;
  letter-spacing: 20px;
  background: linear-gradient(
    135deg,
    rgba(49, 193, 255, 0.2),
    rgba(0, 124, 255, 0.2)
  );
  box-shadow: 0px 10px 20px 0px rgba(0, 124, 255, 0.1);
}
.visit {
  background: linear-gradient(135deg, #31c1ff, #007cff);
  box-shadow: 0px 10px 20px 0px rgba(0, 124, 255, 0.5);
  color: #ffffff;
}
.prompt {
  color: #ff5050;
  font-size: 28px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.prompt img {
  width: 32px;
  height: 32px;
  margin: 4px 0;
}
</style>